<template>
    <h1>C-VModel</h1>

<div>
    <input v-model="name" placeholder="请输入商品名称"/>
    <textarea v-model="name" placeholder="请输入商品描述"></textarea>
    <p>名称是: {{ name }}</p>
</div>

<div>
    <input type="checkbox" id="delivery" v-model="isDelivery">
    <label for="delivery">{{ isDelivery }}</label>
    <span>选项: {{ isDelivery }}</span>
</div>

<div>
    <input type="checkbox" id="food" value="食品" v-model="types">
    <label for="food">食品</label>
    <input type="checkbox" id="book" value="图书" v-model="types">
    <label for="book">图书</label>
    <input type="checkbox" id="clothes" value="衣服" v-model="types">
    <label for="clothes">衣服</label>
    <br>
    <span>类型: {{ types }}</span>
</div>

<div>
    <input type="radio" id="yes" value="1" v-model="isFree">
    <label for="one">是</label>
    <input type="radio" id="no" value="0" v-model="isFree">
    <label for="no">否</label>
    <br>
    <span>选择: {{ isFree }}</span>
</div>

<div>
    <select v-model="company">
    <option value="">请选择</option>
        <option value="001">顺丰</option>
    <option>中通</option>
    <option>圆通</option>
        <option v-bind:value="{ number: 123 }">123</option>
    </select>
    <span>选项: {{ company }}</span>
</div>

<div>
      <input v-model.lazy.trim="msg" >  
      <span>{{msg}}</span>

      <input v-model.number="age" type="number">
       <span>{{age}}</span>
</div>

</template>
<style scoped>

</style>
<script>
export default {
    data() {
        return {
            name:'',
            isDelivery: false,
            types: [],
            isFree: '',
            company: '',

            msg:'',
            age: 1
        }
    },
    methods:{

    }
}
</script>